<template>
	<div class="main-container"  :class="wrap?'main-wrap-container':'main-no-wrap-container'" id="search-mixin-id">
		<main-content :title="contentTitle">
			<div slot="search" v-if="showSearchBox">
				<SearchBox v-if="showSearchBox" :searchParamsList="searchParamsList" :searchParam.sync="searchParam"
					@searchBoxParams="searchClick" @searchReset="searchReset"></SearchBox>
			</div>
			<div slot="table">
				<!-- 在此处放置表格内容 -->
				<avue-crud ref="DataComponentTable" :data="listData" :showColumn="showColumn" :isSaveColumns="true"
					@selection-change="selectionChange" id="printTable" :option="option" stripe :page.sync="page"
					@on-load="onPageLoad" @row-dblclick="handleRowDBLClick" @sort-change="sortChange"
					@current-row-change="handleCurrentRowChange">
					<template slot-scope="scope" slot="menu">
						<el-button type="opr-primary" size="mini" icon="el-icon-view"
							v-if="hasBtns('DataComponent:view')&&hasButtonPermission('DataComponent:view')"
							@click="viewForm(scope.row)">{{$t("crud.viewBtn")}}</el-button>
						<el-button type="opr-primary" size="mini"  icon="el-icon-edit" v-if="hasBtns('DataComponent:modify')&&hasButtonPermission('DataComponent:modify')&&scope.row.F_Status == '未审核'||scope.row.F_Status == '未上架'" @click="editForm(scope.row)">{{$t("crud.editBtn")}}</el-button>
						<el-button type="opr-primary" size="mini"  icon="el-icon-delete" v-if="hasBtns('DataComponent:delete')&&hasButtonPermission('DataComponent:delete')&&scope.row.F_Status == '未审核'||scope.row.F_Status == '未上架'" @click="deleteForm(scope.row)">{{$t("crud.delBtn")}}</el-button>
						<el-button type="opr-primary" size="mini"  icon="el-icon-check"  v-if="hasBtns('DataComponent:approved')&&hasButtonPermission('DataComponent:approved')&&scope.row.F_Status == '未审核'||scope.row.F_Status == '未上架'" @click="approvedForm(scope.row)">{{$t("审核通过")}}</el-button>
						 <el-button type="opr-primary" size="mini"  icon="el-icon-close"  v-if="hasBtns('DataComponent:noapproved')&&hasButtonPermission('DataComponent:noapproved')&&scope.row.F_Status == '未审核'||scope.row.F_Status == '未上架'" @click="noapprovedForm(scope.row)">{{$t("审核不通过")}}</el-button>
						 <el-button type="opr-primary" size="mini"  icon="el-icon-top" v-if="hasBtns('DataComponent:onshelves')&&hasButtonPermission('DataComponent:onshelves')&&scope.row.F_Status == '审核通过'" @click="onshelvesForm(scope.row)">{{("上架")}}</el-button>
						 <el-button type="opr-primary" size="mini"  icon="el-icon-bottom" v-if="hasBtns('DataComponent:offshelves')&&hasButtonPermission('DataComponent:offshelves')&&scope.row.F_Status == '已上架'" @click="offshelvesForm(scope.row)">{{("下架")}}</el-button>
					</template>
					<template slot="menuLeft">
						<el-button type="primary" v-if="hasButtonPermission('DataComponent:add')" icon="el-icon-plus"
							size="small" @click="openForm()">{{$t("crud.addBtn")}}</el-button>
						<el-button type="primary" v-if="hasButtonPermission('DataComponent:batchDelete')"
							icon="el-icon-delete" size="small" @click="batchDelete()">
							{{$t("forme.editModal.batchDeletionBtn")}}</el-button>
						<el-button type="primary" v-if="hasButtonPermission('DataComponent:print')"
							icon="el-icon-printer" size="small" @click="printForm">{{$t("editorModule.print")}}
						</el-button>
					</template>
				</avue-crud>
				<el-dialog title="表单"  v-dialogDrag :append-to-body="true" :fullscreen="true" :visible.sync="flag"
					:class="isWorkflowForm ? 'work-form-dialog' : ''" :show-close="!isWorkflowForm">
					<DataComponentForm v-if="flag" :isEdit="isEdit" :disabled="disabled" @onChange="dialogChange" :isView="isView"
						:keyValue="keyValue"></DataComponentForm>
				</el-dialog>
			</div>
		</main-content>
	</div>
</template>
<script>
	import MainFixed from "@/page/main/MainFixed";
	import authorizeMixin from "@/mixins/authorize";
	import tableOptionMixin from "@/mixins/tableOption"; //table 高度计算
	import tableSearchMixin from "@/mixins/tableSearch"; //table 搜索 
	import displayColumnsMixin from "@/mixins/displayColumns"; //表格展示列显隐保存 
	import MainContent from "@/page/main/MainContent";
	import request from '@/router/axios';
	import {
		baseUrl
	} from '@/config/env';
	import {
		getOrder
	} from '@/util/util';
	import DataComponentForm from './DataComponentForm';
	export default {
		name: "DataComponent",
		mixins: [authorizeMixin, tableOptionMixin, tableSearchMixin, displayColumnsMixin],
		components: {
			MainContent,
			DataComponentForm,
			MainFixed
		},
		data() {
			return {
				btns: [
					'DataComponent:refresh',
					'DataComponent:add',
					'DataComponent:view',
					'DataComponent:modify',
					'DataComponent:delete',
					'DataComponent:batchDelete',
					'DataComponent:print',
					'DataComponent:modify',
					'DataComponent:delete',
					'DataComponent:approved',
					'DataComponent:noapproved',
					'DataComponent:onshelves',
					'DataComponent:offshelves'
				],
				page: {
					pageSize: 20,
					total: 0,
					currentPage: 1,
					layout: "total, prev, pager, next, jumper"
				},
				ids: '',
				listData: [],
				keyValue: '',
				isView:'none',
				flag: false,
				isEdit: true, // 查看-不显示按钮,
				disabled: false, // 查看-禁用input,
				isWorkflowForm: false, //默认值 false
				defaultOrderfield: '', //默认排序字段
				defaultOrder: '', //默认排序
				searchParam: {},
				defaultProps: {
					children: 'children',
					label: ''
				},
				option: {
					rowKey: 'F_Id',
					highlightCurrentRow: true,
					stripe: true,
					addBtn: false,
					tip: false,
					menuWidth: 330,
					border: true,
					page: true,
					selection: true,
					index: true,
					menu: false,
					indexLabel: this.$t('custmerForm.tableNumber'),
					align: 'center',
					menuAlign: 'left',
					delBtn: false,
					editBtn: false,
					column: [{
							sortable: true,
							label: this.$t("组件名称"),
							prop: 'F_Name',
							overHidden: true,
						},
						{
							sortable: true,
							label: this.$t("组件简介"),
							prop: 'F_BriefIntroduction',
							overHidden: true,
						},
						{
							sortable: true,
							label: this.$t("所属类目"),
							prop: 'F_ClassHeading',
							overHidden: true,
						},
						// {
						//     sortable: true,
						//     label: this.$t("数据产品场景分类"),
						//     prop: 'F_DataSceneClassification',
						//     overHidden: true,
						// },
						{
							sortable: true,
							label: this.$t("数据来源"),
							prop: 'F_DataSources',
							overHidden: true,
						},
						{
							sortable: true,
							label: this.$t("付费类型"),
							prop: 'F_Free',
							overHidden: true,
						},
						// {
						//     sortable: true,
						//     label: this.$t("付费方式"),
						//     prop: 'F_PayType',
						//     overHidden: true,
						// },
						// {
						//     sortable: true,
						//     label: this.$t("价格类型"),
						//     prop: 'F_PriceType',
						//     overHidden: true,
						// },
						// {
						//     sortable: true,
						//     label: this.$t("价格区间"),
						//     prop: 'F_BottomPrice',
						//     overHidden: true,
						// },
						// {
						//     sortable: true,
						//     label: this.$t("--"),
						//     prop: 'F_PeakPrice',
						//     overHidden: true,
						// },
						{
							sortable: true,
							label: this.$t("交付方式"),
							prop: 'F_DeliveryMethod',
							overHidden: true,
						},
						// {
						//     sortable: true,
						//     label: this.$t("组件链接类型"),
						//     prop: 'F_UrlType',
						//     overHidden: true,
						// },
						{
							sortable: true,
							label: this.$t("数据产品版本"),
							prop: 'F_Versions',
							overHidden: true,
						},
						//                   {
						//                       sortable: true,
						//                       label: this.$t("数据产品试用链接"),
						//                       prop: 'F_Url',
						//                       overHidden: true,
						//                   },
						//                   {
						//                       sortable: true,
						//                       label: this.$t("数据产品使用要求"),
						//                       prop: 'F_UseRequirement',
						//                       overHidden: true,
						//                   },
						{
							sortable: true,
							label: this.$t("发布商"),
							prop: 'F_publisher',
							overHidden: true,
						},
						// {
						//     sortable: true,
						//     label: this.$t("地区"),
						//     prop: 'F_publishAddress',
						//     overHidden: true,
						// },
						// {
						//     sortable: true,
						//     label: this.$t("邮箱"),
						//     prop: 'F_publishEmail',
						//     overHidden: true,
						// },
						// {
						//     sortable: true,
						//     label: this.$t("联系人"),
						//     prop: 'F_publishUserName',
						//     overHidden: true,
						// },
						// {
						//     sortable: true,
						//     label: this.$t("联系方式"),
						//     prop: 'F_publishPhone',
						//     overHidden: true,
						// },
						{
							sortable: true,
							label: this.$t("组件状态"),
							prop: 'F_Status',
							overHidden: true,
						},
						// {
						// 	sortable: true,
						// 	label: this.$t("组件创建时间"),
						// 	prop: 'F_CreateDate',
						// 	overHidden: true,
						// },
						// {
						//     sortable: true,
						//     label: this.$t("地区"),
						//     prop: 'F_ServiceAddress',
						//     overHidden: true,
						// },
						// {
						//     sortable: true,
						//     label: this.$t("邮箱"),
						//     prop: 'F_ServiceEmail',
						//     overHidden: true,
						// },
						// {
						//     sortable: true,
						//     label: this.$t("联系人"),
						//     prop: 'F_ServiceLinkMan',
						//     overHidden: true,
						// },
						// {
						//     sortable: true,
						//     label: this.$t("联系方式"),
						//     prop: 'F_ServicePhone',
						//     overHidden: true,
						// },
						// {
						//     sortable: true,
						//     label: this.$t("服务商简介"),
						//     prop: 'F_ProviderProfile',
						//     overHidden: true,
						// },
						// {
						//     sortable: true,
						//     label: this.$t(""),
						//     prop: 'F_ApplicationScenario',
						//     overHidden: true,
						// },
						// {
						//     sortable: true,
						//     label: this.$t(""),
						//     prop: 'F_CommonProblem',
						//     overHidden: true,
						// },
						// {
						//     sortable: true,
						//     label: this.$t("商品协议"),
						//     prop: 'F_CommodityAgreement',
						//     overHidden: true,
						// },
					]
				}
			}
		},
		created() {
			//是否有编辑 查看 删除 发起流程 发起临时流程权限 无则为操作列不显示
			let oprBtns = ['DataComponent:modify', 'DataComponent:view', 'DataComponent:delete',
				'DataComponent:createFormFlow', 'DataComponent:createDesignFlow','DataComponent:approved',
				'DataComponent:noapproved','DataComponent:onshelves','DataComponent:offshelves'
			];
			let intersection = this.btns.filter((v) => oprBtns.includes(v));
			if (intersection.length > 0) {
				this.option.menu = true
			} else {
				this.option.menu = false
			}
			let querySearchData = [{
					name: '组件名称',
					DateField: '',
					field: 'F_Name',
					tag: 'el-input',
					avueType: 'textarea',
					lgmark: '',
				},
				{
					name: '服务商',
					DateField: '',
					field: 'F_ServiceProvider',
					tag: 'el-input',
					avueType: 'textarea',
					lgmark: '',
				},
				// { 
				// 	name: '商品协议', 
				// 	DateField: '', 
				// 	field: 'field13624af', 
				// 	tag: 'el-input', 
				// 	avueType: 'textarea', 
				// 	lgmark: '', 
				// }, 

			]
			this.getSystemSearchList(querySearchData);
			if (this.btns.length > 0) {
				let tempBtns = this.btns.concat(oprBtns).filter((v) => this.btns.includes(v) && !oprBtns.includes(v));
				if (tempBtns.length > 0) {
					this.searchBtns = [...new Set([...tempBtns])];
				}
			}
		},
		methods: {
			handleRowDBLClick(row, event) {
				if (this.hasBtns('DataComponent:modify') && this.hasButtonPermission('DataComponent:modify') && this
					.openDoubleClickEdit) {
					this.editForm(row)
				}
			},
			handleCurrentRowChange(row) {
				this.$refs.DataComponentTable.toggleSelection([row]);
			},
			printForm() {
				let element = window.document.getElementById("printTable");
				setTimeout(() => {
					html2canvas(element, {
						backgroundColor: null,
						useCORS: true,
						windowHeight: document.body.scrollHeight
					}).then(canvas => {
						const url = canvas.toDataURL();
						this.printImg = url;
						printJS({
							printable: url,
							type: "image",
							documentTitle: '打印',
							scanStyles: false,
							repeatTableHeader: false,
							header: null
						});
					});
				}, 1);
			},
			hasBtns(encode) {
				return this.btns.includes(encode);
			},
			/* 获取公司用户数据 */
			getListData() {
				if (!this.searchParam.order) {
					this.searchParam.orderfield = this.defaultOrderfield;
					this.searchParam.order = this.defaultOrder;
				}
				let params = this.changeSearchParams();
				request({
					url: baseUrl + '/barinfunctionalsubassembly?F_Class=1',
					method: 'get',
					params: params
				}).then(res => {
					this.listData = res.data.data.Rows
					for(let i = 0;i<res.data.data.Total;i++){
						if(res.data.data.Rows[i].F_DataSources == 0){
							this.listData[i].F_DataSources = "完全公开数据"
						}
						else{
							this.listData[i].F_DataSources = "非完全公开数据"
						}
					}
					
					this.page.total = res.data.data.Total;
				})
			},
			/* 页面加载 */
			onPageLoad(page) {
				this.searchParam.limit = page.currentPage;
				this.searchParam.size = page.pageSize;
				this.getListData();
			},
			/*查看*/
			viewForm(val) {
				this.flag = true;
				this.isEdit = false;
				this.isView = 'auto';
				this.disabled = true;
				this.keyValue = val.F_Id;
			},
			/* 编辑 */
			editForm(val) {
				this.flag = true;
				this.isEdit = true;
				this.isView = 'none';
				this.disabled = false;
				this.keyValue = val.F_Id;
			},
			approvedForm(val) {
				this.$confirm(this.$t("确定审核通过吗?"), this.$t("tip"), {
					confirmButtonText: this.$t("buttonModule.modalSureBtn"),
					cancelButtonText: this.$t("editorModule.cancel"),
					type: "warning",
				}).then(() => {
					request({
						url: baseUrl + "/barinfunctionalsubassembly/audit?status=1&id=" + val.F_Id,
						method: "put",
					}).then((res) => {
						this.getListData()
						this.$notify({
							title: this.$t("Notice.hintSuccess"),
							message: this.$t("审核成功"),
							type: "success",
						});
					});
				});

			},
			noapprovedForm(val) {
				this.$confirm(this.$t("确定审核不通过吗?"), this.$t("tip"), {
					confirmButtonText: this.$t("buttonModule.modalSureBtn"),
					cancelButtonText: this.$t("editorModule.cancel"),
					type: "warning",
				}).then(() => {
					request({
						url: baseUrl + "/barinfunctionalsubassembly/audit?status=2&id=" + val.F_Id,
						method: "put",
					}).then((res) => {
						this.getListData()
						this.$notify({
							title: this.$t("Notice.hintSuccess"),
							message: this.$t("审核成功"),
							type: "success",
						});
					});
				});
			},
			onshelvesForm(val) {
				this.$confirm(this.$t("确定上架吗?"), this.$t("tip"), {
					confirmButtonText: this.$t("buttonModule.modalSureBtn"),
					cancelButtonText: this.$t("editorModule.cancel"),
					type: "warning",
				}).then(() => {
					request({
						url: baseUrl + "/barinfunctionalsubassembly/audit?status=3&id=" + val.F_Id,
						method: "put",
					}).then((res) => {
						this.getListData()
						this.$notify({
							title: this.$t("Notice.hintSuccess"),
							message: this.$t("上架成功"),
							type: "success",
						});
					});
				});
			},
			offshelvesForm(val) {
				this.$confirm(this.$t("确定下架吗?"), this.$t("tip"), {
					confirmButtonText: this.$t("buttonModule.modalSureBtn"),
					cancelButtonText: this.$t("editorModule.cancel"),
					type: "warning",
				}).then(() => {
					request({
						url: baseUrl + "/barinfunctionalsubassembly/audit?status=4&id=" + val.F_Id,
						method: "put",
					}).then((res) => {
						this.getListData()
						this.$notify({
							title: this.$t("Notice.hintSuccess"),
							message: this.$t("下架成功"),
							type: "success",
						});
					});
				});
			},
			/* 打开表单 */
			openForm() {
				if (!this.isWorkflowForm) {
					//不处理工作流表单时候，表单类型重置
					window.localStorage.setItem('systemFormType', 0);
				}
				this.disabled = false;
				this.keyValue = null;
				this.flag = true;
				this.isView = 'none';
				this.isEdit = true;
			},
			/* 删除 */
			deleteForm(val) {
				this.$confirm(this.$t("deletePrompt.promptContent"), this.$t("tip"), {
					confirmButtonText: this.$t("buttonModule.modalSureBtn"),
					cancelButtonText: this.$t("editorModule.cancel"),
					type: "warning",
				}).then(() => {
					request({
						url: baseUrl + "/barinfunctionalsubassembly/" + val.F_Id,
						method: "delete",
					}).then((res) => {
						this.getListData()
						this.$notify({
							title: this.$t("Notice.hintSuccess"),
							message: this.$t("deletePrompt.successDeleted"),
							type: "success",
						});
					});
				});
			},
			/* 分页 */
			sortChange(data) {
				if (data.order) {
					let order = getOrder(data.order);
					this.searchParam.order = order;
					this.searchParam.orderfield = data.prop;
				} else {
					this.searchParam.order = this.defaultOrder;
					this.searchParam.orderfield = this.defaultOrderfield;
				}
				this.getListData()
			},
			/* 弹窗回调 */
			dialogChange(b) {
				this.flag = false;
				this.$nextTick(() => {
					this.getListData();
				})
			},
			/* 查询 */
			searchClick(params) {
				this.page.currentPage = 1;
				this.searchParam.limit = 1;
				this.searchParam.size = this.page.pageSize;
				this.searchParam = params;
				this.getListData()
			},
			/* 查询表单重置 */
			searchReset() {
				for (const key in this.searchParam) {
					if (this.searchParam[key]) {
						this.searchParam[key] = null;
					}
				}
				this.page.currentPage = 1;
				this.searchParam.limit = 1;
				this.searchParam.size = this.page.pageSize;
				this.getListData();
			},
			selectionChange(list) {
				this.ids = list.map((x) => x.F_Id).join(',');
			},
			batchDelete() {
				if (!this.ids || this.ids.split(",").length === 0) {
					this.$message.error(this.$t("deletePrompt.noSelected"));
					return;
				}
				this.$confirm(this.$t("deletePrompt.promptContent"), this.$t("tip"), {
					confirmButtonText: this.$t("buttonModule.modalSureBtn"),
					cancelButtonText: this.$t("editorModule.cancel"),
					type: "warning",
				}).then(() => {
					request({
						url: baseUrl + "/barinfunctionalsubassembly/" + this.ids,
						method: "delete",
					}).then((res) => {
						this.getListData();
						this.$notify({
							title: this.$t("Notice.hintSuccess"),
							message: this.$t("deletePrompt.successDeleted"),
							type: "success",
						});
					});
				});
			},
		}
	}
</script>
<style scoped>
	.searchBox {
		width: calc(100% - 218px);
		display: inline-block;
	}

	.main-container {
		height: 100% !important;
		padding: 0 8px !important;
	}

	div /deep/ .custom-tree-node span {
		font-size: 14px;
		padding-left: 10px;
	}

	div /deep/ .custom-tree-node i {
		font-size: 12px;
	}

	div /deep/ .el-dialog__body {
		height: 70vh;
		overflow: scroll;
	}
</style>
